<template>
  <el-table ref="tableRef" :data="tableData" :height="300" border style="width: 100%;">
    <el-table-column prop="name" label="名字" width="120" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="No" label="编号" />
  </el-table>
  <!-- <PageControl :pageControlParams="pageControlParams" ></PageControl> -->
  <ButtonEdit :clearButton="true" :disabled="false" placeholder="请输入......" :label="label"
    :buttonClick="buttonClickHandle" :cleanClick="cleanClickHandle" :value="value" />
  <el-button type="success" plain @click="addedData">新增</el-button>
  <div class="custom-file-upload">
    <input type="file" id="fileUpload" class="file-upload" multiple />
    <label for="fileUpload" class="file-upload-label">选择文件</label>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
// import PageControl from '@/components/PageControl.vue';
import ButtonEdit from '@/components/ButtonEdit.vue';
// import { type pageControlParam } from "@/type"
let timer: number | null | undefined = null;
let tableRef = ref();
let value = ref("");
let label = ref("");
//let pageControlParams = ref<pageControlParam>({ currentPage: 0, pageSize: 50, total: 101 })
const scroll = () => {
  // 在执行新的计时器前将之前的计时器清除
  if (timer) clearInterval(timer);
  let status = true;
  // 获取表格滚动区域的dom
  const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
  // 增加监听事件鼠标移入停止滚动
  scrollDom.addEventListener('mouseover', () => {
    status = false;
  });
  // 鼠标移出恢复滚动
  scrollDom.addEventListener('mouseout', () => {
    status = true;
  });
  // 设置每秒滚动一行
  timer = setInterval(() => {
    if (status) {
      // 设置每次滚动的像素
      scrollDom.scrollTop += 1;
      // 当滚动到底部时修改scrollTop回到顶部
      if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1) {
        scrollDom.scrollTop = 0;
      }
    }
    //控制速度
  }, 20);
}
const tableData = ref(Array(10).fill({}).map((item, index) => {
  return { name: '马飞', age: 25 + index, No: index }
}))
//设置定时器进行自滚动
const getData = () => {
  setTimeout(() => { scroll() }, 5)
}
//buttonClick
function buttonClickHandle(e: Event) {
  console.log("点击三点", e)
}
//cleanClick
function cleanClickHandle(e: Event) {
  value.value = "";
  console.log("点击清除", e)
}
function addedData() {
  value.value = "我欲成仙";
  label.value = "我更新呢";
  console.log("ooooooooo")
}
onMounted(() => {
  getData()
})
onUnmounted(() => {
  // 组件卸载记得清除计时器
  if (timer) clearInterval(timer);
  timer = null;
})
</script>
<style scoped>
.file-upload {
  border: solid 1px #ccc;
}
.file-upload-label {
  background-color: #daeed8;
  color: rgb(34, 0, 255);
  border-radius: 5px;
  padding: 8px;
  display: inline-block;
  cursor: pointer;
}

/* .custom-file-upload {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.file-upload-label:hover {
  background-color: #e2e2e2;
} */
</style>